<template>
	<view>
		<view class="page_title">
			<nav-back></nav-back>
			<view class="page_name">单身承诺</view>
			<view class="blank"></view>
		</view>

		<view class="banxin" v-if="authStatus==1 || authStatus==3">
			<view class="auth">
				<view v-if="authStatus==1">
					<view class="why">
						签署单身承诺
					</view>
					<view class="info">
						请认真阅读并签署承诺书
					</view>
				</view>
				<view v-if="authStatus==3">
					<view class="why">
						<image src="/static/img/auth_fail.png" mode="" />
						未通过
					</view>
					<view class="info">
						未通过原因：字迹不清晰，请重新签署
					</view>
				</view>
				<view class="commitment">
					<text class="letter">
						本人在暖余生平台注册使用网名{{userName}}，会员号{{userNumber}}，现对所登记交友信息做如下承诺：
						1.本人当前婚姻状况为未婚/离异
						2.所登记均为真实信息，如有虚假愿意承担由此导致的一切后果
					</text>
				</view>
				<view class="why">
					签名区
				</view>
				<view class="info">
					在下面空白区域手写签名，字迹清晰，与实名认证姓名一致
				</view>
				<button class="next" type="primary" @click="handleNext">提交审核</button>
				<view class="modal-content-area">
					<view class="modal-content">
						<view class="toast" @click="clearCanvas">
							<image src="/static/img/reset.png" mode="" />
							清空重签
						</view>
						<canvas canvas-id="signature" class="modal-canvas" :disable-scroll="true" id="writeCanvas"
							@touchstart="scaleStart" @touchmove="scaleMove" @touchend="scaleEnd"></canvas>
						<!-- <view class="modal-bottom">
		          <view class="clear_signature" @click=""></view>
		          <view class="flex_btn">
		              <view class="modal-btn modal-clear" @click="clearCanvas">清空</view>
		              <view class="modal-btn modal-confirm" @click="save">确定</view>
		          </view>
		      </view> -->
					</view>
				</view>
			</view>


		</view>

		<view class="banxin" v-if="authStatus==0">
			<view class="auth">
				<view class="why">
					<image src="/static/img/auth_success.png" mode="" />
					已签署
				</view>
				<view class="info">
					<text>您已于{{authTime}} 签署了单身承诺书
					</text>
				</view>
				<view class="tip2">
					<image src="/static/img/tip.png" mode="" />
					<text>仅作为平台留存，不会对外显示。</text>
				</view>
			</view>
			<button class="next" type="primary" @click="handleLetter">查看我的承诺书</button>
		</view>

		<view class="banxin" v-if="authStatus==2">
			<view class="auth">
				<view class="why">
					<image src="/static/img/auth_pending.png" mode="" />
					审核中
				</view>
				<view class="info">
					<text>您已于{{authTime}} 签署了单身承诺书\n</text>
				</view>
				<view class="tip2">
					<image src="/static/img/tip.png" mode="" />
					<text>仅作为平台留存，不会对外显示。</text>
				</view>
			</view>
			<button class="next" type="primary" @click="handleLetter">查看我的承诺书</button>
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js'
	import NavBack from '@/components/NavBack.vue'

	export default {
		components: {
			NavBack
		},
		data() {
			return {
				authStatus: 3,
				authTime: '',
				userName: '',
				userNumber: '',
				tempFilePath: '',
				hideModal: false,
				hasDraw: false,
				canvasName: '#writeCanvas',
				ctx: '',
				canvasWidth: 0,
				canvasHeight: 0,
				startPoint: {
					x: 0,
					y: 0,
				},
				selectColor: 'black',
				lineColor: '#1A1A1A', // 颜色
				lineSize: 1, // 笔记倍数
				radius: 2, //画圆的半径
				signFile: {}
			};
		},
		onLoad() {
			this.initStatus()
			this.userName = uni.getStorageSync('name')
			this.userNumber = uni.getStorageSync('number')
		},
		onShow() {
			this.hideModal = false
			let that = this
			let query = uni.createSelectorQuery().in(this);
			//获取自定义组件的SelectQuery对象
			this.canvasCtx = uni.createCanvasContext('signature', that)
			// 设置线的样式
			this.canvasCtx.setLineCap("round");
			this.canvasCtx.setLineJoin("round");
			// 初始化颜色
			this.canvasCtx.setStrokeStyle(that.selectColor);
			// 初始化粗细
			query.select('.modal-canvas')?.boundingClientRect(rect => {
				this.canvasWidth = rect?.width
				this.canvasHeight = rect?.height
			}).exec();
		},
		methods: {
			initStatus() {
				let that = this
				request(`/employee/${uni.getStorageSync('id')}`).then((res) => {
					console.log(res.data.data.authentication, 'authentication');
					let authentication = res.data.data.authentication
					that.authStatus = authentication.singleStatus
					that.authTime = authentication.singleTime
				})
			},
			/**
			 * 生命周期函数--监听页面初次渲染完成
			 */
			onReady() {

			},
			scaleStart(event) {
				console.log(event, 'scaleStart');
				if (event.type != 'touchstart') return false;
				let currentPoint = {
					x: event.touches[0].x,
					y: event.touches[0].y
				}
				// this.ctx.moveTo(currentPoint.x, currentPoint.y)
				this.drawCircle(currentPoint);
				this.startPoint = currentPoint
				this.hasDraw = true
			},
			mouseDown() {},
			scaleEnd(e) {
				this.isStart = true
			},
			scaleMove(event) {
				if (event.type != "touchmove") return false;
				let {
					startPoint
				} = this
				let currentPoint = {
					x: event.touches[0].x,
					y: event.touches[0].y
				}

				this.drawLine(startPoint, currentPoint)
				this.startPoint = currentPoint
			},
			drawCircle(point) { //这里负责点
				let ctx = this.canvasCtx;
				ctx.beginPath();
				ctx.setFillStyle(this.lineColor)
				//笔迹粗细由圆的大小决定
				ctx.arc(point.x, point.y, this.radius, 0, 2 * Math.PI);
				ctx.fill();
				ctx.closePath();
				ctx.draw(true)
			},
			drawLine(sourcePoint, targetPoint) {
				let ctx = this.canvasCtx;
				this.drawCircle(targetPoint);
				ctx.beginPath();
				ctx.setStrokeStyle(this.lineColor)
				ctx.setLineWidth(this.radius * 2)
				ctx.moveTo(sourcePoint.x, sourcePoint.y);
				ctx.lineTo(targetPoint.x, targetPoint.y);
				ctx.stroke();
				ctx.closePath();
			},
			clearCanvas() {
				//清空画布
				let ctx = this.canvasCtx;
				ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
				ctx.fillStyle = 'rgba(0, 0, 0, .1)';
				ctx.draw()
				this.hasDraw = false
			},
			handleNext() {
				let {
					hasDraw,
				} = this
				if (!hasDraw) {
					uni.showToast({
						title: '您还未签名！',
						icon: 'none',
						mask: true
					})
					return
				} else {
					this.saveToImage();
				}
			},
			handleLetter() {
				uni.navigateTo({
					url: `/pages/userAuth/singleLetter/singleLetter`
				})
			},
			saveToImage() {
				let that = this;
				let {
					canvasHeight,
					canvasWidth
				} = that
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: this.canvasWidth,
					height: this.canvasHeight,
					canvasId: 'signature',
					success(res) {
						if (res.tempFilePath) {
							console.log(res.tempFilePath, 'res.tempFilePath');
							// that.triggerEvent('saveToImageEvent', res.tempFilePath)
							let filePath = res.tempFilePath
							request(`/sms/singleAuthenticate`, {
								method: 'POST',
								data: {
									base64Data: res.tempFilePath.slice(22),
								}
							}).then(((res) => {
								console.log(res.data, 'res');
								if (res.data.code == 1) {
									that.authStatus = 2
									that.initStatus()
								} else {
									uni.showToast({
										title: res.data.msg,
										icon: 'none',
										duration: 2000
									})
								}
							}))
						}
					},
					fail(err) {
						console.log(err);
					}
				}, that)
			},
		}
	}
</script>

<style lang="scss">
	/* pages/singleauth/singleauth.uniss */
	@import "@/style/auth.scss";

	.commitment {
		padding: 30rpx;
		border-radius: 20rpx;
		margin-top: 30rpx;
		line-height: 40rpx;
		background-color: rgba(245, 245, 255, 1);

		text {
			font-size: 28rpx;
			display: block;
			// margin-top: -30rpx;
		}
	}

	.modal-content-area {
		z-index: 5;
		width: 85%;
		height: 300rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		background: #305397;
		position: absolute;
	}

	.modal-content {
		width: 100%;
		height: 300rpx;
		border-radius: 20rpx;
		background: #bd3131;
	}

	.modal-canvas {
		width: 100%;
		display: block;
		border-radius: 20rpx;
		height: 300rpx;
		background: #F5F7FB !important;
		border: 1rpx solid rgba(0, 0, 0, 0.08);
		z-index: 1;
	}


	.modal-bottom {
		position: absolute;
		bottom: 15rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 100;
		width: 100vw;
		box-sizing: border-box;
		padding: 0 32rpx;
	}

	.modal-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 85rpx;
		height: 30rpx;
		background: rgba(103, 149, 255, 0.2);
	}

	.modal-clear {
		font-size: 13rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #3670F5;
		margin-right: 12rpx;
	}

	.modal-confirm {
		background: #3670F5;
		font-size: 13rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}

	.modal-btn:nth-child(1) {
		border-right: 1rpx solid #ffffff;
	}

	.clear_signature {
		/* position: absolute; */
		top: 40rpx;
		right: 15rpx;
		display: flex;
		align-items: center;
		z-index: 1;
		font-size: 13rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #3670F5;
		/* background-color: #F5F7FB; */
		z-index: 100;
	}

	.clear_signature>text {
		height: 17rpx;
	}

	.clear_signature>image {
		width: 15rpx;
		height: 15rpx;
		margin-right: 2rpx;
	}

	.toast {
		position: absolute;
		bottom: 5%;
		right: 5%;
		display: flex;
		align-items: cen;
		transform: rotate(-50%, -50%);
		z-index: 100;
		font-size: 20rpx;
		line-height: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(166, 166, 166, 1);

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.flex_btn {
		display: flex;
		align-items: center;
	}
</style>